<template>
  <div ref="node"
       :style="nodeContainerStyle"
       :class="nodeContainerClass"
       @mouseup="changeNodePosition"
       @click="clickNode"
       @contextmenu="showMenu">
    <div class="node-header">
      <i :class="iconClass"></i> {{ node.name }}
      <template v-if="node.info.joinType">
        （{{ node.info.joinType === 'ALL' ? '会签' : '或签' }}）
      </template>
      <template v-if="node.info.copy">
        <div style="float:right;">
          <Poptip trigger="hover" title="抄送用户" :content="node.info.copyUserText" transfer placement="right-start">
            <span class="fa fa-paper-plane-o"></span>
          </Poptip>
        </div>
      </template>
    </div>
    <div class="node-body">
      <template v-if="node.info.allot==='DESIGNUSER'">
        {{ node.info.userText }}
      </template>
      <template v-if="node.info.allot==='DESIGNROLE'">
        {{ node.info.roleText }}
      </template>
      <template v-if="node.info.allot==='EVERYONE'">
        本系统任意用户
      </template>
      <template v-if="node.info.allot==='RUNNINGUSER'">
        运行时指定用户
      </template>
      <template v-if="node.info.allot==='RUNNINGROLE'">
        运行时指定角色
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
  components: {},
})
export default class FlowNode extends AbpBase {
  name: string = 'FlowNode';
  @Prop({type: Object, default: {}}) node: any;
  @Prop({type: Object, default: {}}) currentElement: any;

  get nodeContainerClass() {
    return {
      'task': (this.currentElement.type === 'node' ? this.currentElement.node.id !== this.node.id : true) && this.node.type === 'task',
      'start': (this.currentElement.type === 'node' ? this.currentElement.node.id !== this.node.id : true) && this.node.type === 'start',
      'end': (this.currentElement.type === 'node' ? this.currentElement.node.id !== this.node.id : true) && this.node.type === 'end',
      'copy': (this.currentElement.type === 'node' ? this.currentElement.node.id !== this.node.id : true) && this.node.type === 'copy',
      'node-container': true,
      'node-active': this.currentElement.type === 'node' ? this.currentElement.node.id === this.node.id : false,
    };
  }

  get nodeContainerStyle() {
    return {
      top: this.node.top,
      left: this.node.left,
    };
  }

  get iconClass() {
    const icons = {};
    icons[this.node.icon] = true;
    icons['node-drag'] = !this.node.viewOnly;
    return icons;
  }

  clickNode(event) {
    this.$emit('clickNode', event, this.node);
  }

  changeNodePosition() {
    if (this.node.left === (this.$refs.node as any).style.left && this.node.top === (this.$refs.node as any).style.top) {
      return;
    }
    this.$emit('changeNodePosition', {
      nodeId: this.node.id,
      left: (this.$refs.node as any).style.left,
      top: (this.$refs.node as any).style.top,
    });
  }

  showMenu(event) {
    this.$emit('contextmenu', event, this.node);
  }



}
</script>

<style lang="less" scoped>
@import './styles/flow.less';

</style>
